<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="../css/style.css" />
		<link rel="stylesheet" href="../css/app.css" />
		<link rel="stylesheet" href="../css/mui.picker.css" />
		<link rel="stylesheet" href="../css/mui.poppicker.css" />
		<script type="text/javascript" src="../js/head_public.js" ></script>
		<script type="text/javascript" src="../js/jquery-1.8.0.min.js" ></script>
		<style>
			.baocun{color: #fff;background: #ff7e00;position: absolute;border:none;z-index: 10;top: 0.12rem;right: 0.2rem;}
		    .changep-form p{padding: 0px!important;margin: 0px!important;width: 100%!important;}
		    .changep-form p input{padding-left: 10px!important;font-size: 14px;}
		    .mui-switch.mui-active{border-color: #ff7e00;background: #ff7e00;}
		    .mui-btn-blue{background: #ff7e00!important;border: none!important;}
		    .diqu-div span{font-size: 14px;color: #323232;}
			.diqu-div{text-align: center;padding: 5px 0px;color:#ff7e00;}
		    .diqu-container{position: relative;}
		    .diqu-ul{position: absolute;top: 0px;left: 0px;width: 100%;padding: 5px;}
		    .diqu-ul li{margin: 5px;padding:0px 10px;color: #323232;font-size: 14px;height: 30px;line-height: 30px;border-bottom: 1px dashed #ccc;overflow: hidden;}
		    .city,.town{display: none;}
		    .diqu-ul li span:nth-of-type(2){float: right;font-size: 16px;color: #666;}
		    .quyu{display: none;}
		</style>
		
	</head>

	<body>
		<div class="mui-bar mui-bar-nav ding-bar">
		    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		    <h1 class="mui-title" style="position: relative;width: 80%;">添加收货地址<button class="baocun">保存</button></h1>
		</div>
		<div class="mui-content" >
			<div style="height: 50px;"></div>
		    <form class="changep-form" style="background: #fff;">
		    	<p><input type="text" name="true_name" placeholder="收货人" id="person"></p>
		    	<p><input type="text" name="mob_phone" placeholder="手机号" id="phone"></p>
		    	<p><input type="text" id="diqu" placeholder="所在地区"readonly="readonly"></p>
		    	<p><textarea name="address" placeholder="详细地址：如道路、门牌号、小区、楼栋号、单 元室等" style="height:2rem;border: none;font-size: 14px;padding: 10px;" id="xiangxi"></textarea></p>
		    	<div class="kong" style="background: #e0e6f6;"></div>
		    	<ul class="mui-table-view">
					<li class="mui-table-view-cell">
						<span>设为默认地址</span>
						<div class="mui-switch mui-switch-mini mui-active kaiguan">
							<div class="mui-switch-handle"></div>
						</div>
					</li>
				</ul>
		    </form>
		</div>
		<div class="mui-backdrop quyu" id="quyu" style="overflow: scroll;top: 50px;">
			<div class="diqu-div" style="background: #FFF;">
	        	<span id="province-choose"></span>--
	        	<span id="city-choose"></span>--
	        	<span id="towm-choose"></span>
	        </div>
	        <div class="diqu-container"  style="background: #FFF;">
	        	<ul class="diqu-ul" id="sheng"style="background: #FFF;">
		        	
		        </ul>
	        	<ul class="diqu-ul city" id="city"style="background: #FFF;">
		        	
		        </ul>
	        	<ul class="diqu-ul town" id="town"style="background: #FFF;">
		        	
		        </ul>
	        </div>
		</div>
		<script src="../js/mui.min.js"></script>
		<!--<script src="../js/mui.picker.js"></script>-->
		<!--<script src="../js/mui.poppicker.js"></script>-->
		<!--<script src="../js/city.data-3.js"></script>-->
		<script src="../js/common.js"></script>
		<script src="../js/session.js"></script>
		<script>
			var provinceid="";//存储省的id
			var cityid="";//存储市的id
			var townid="";//存储区的id
            var provice="";
            var city="";
            var town="";
            var is_default="1";
            var address_id=getQueryString("id");
			mui.init({
				swipeBack:true //启用右滑关闭功能
			});
			var pay=getQueryString("pay")
			var ye=getQueryString("ye")
			//默认开关的控制
			mui('.mui-content .mui-switch').each(function() { //循环所有toggle
				this.addEventListener('toggle', function(event) {
					//event.detail.isActive 可直接获取当前状态
					if (event.detail.isActive){
						is_default="1";
//						alert(is_default);
					}else{
						is_default="0";
//						alert(is_default);
					}
				});
			});
			//显示地区
		    mui(".changep-form").on("tap","#diqu",function(){
		    	$("#quyu").show();
    		    $("#sheng").show();
               	$("#city").hide();
               	$("#town").hide();
		    	//读取地区
              	$.post(net+"/public/index.php?s=api/shop/getArea",{data:null},function(data){
	               if(data.code==200){
		               	if(data.result!=null&&data.result!=""&&data.result.length!=0){
		               		var str="";
		               		var str2="";
		               		var str3="";
		               		$.each(data.result, function(index,val) {	
		               	   	    str+="<li data-id='"+val.area_id+"'><span>"+val.area_name+"</span><span>&gt;</span></li>"
		               	    });
		               	  $("#sheng").html(str);
		               
		               	    //点击省加载该省下的是
		               	    mui("#sheng").on("tap","li",function(){
		               	    	provinceid=$(this).attr("data-id");
		               	    	provice=$(this).find("span:nth-of-type(1)").html();
		               	    	$("#province-choose").html($(this).find("span:nth-of-type(1)").html())
		               	    	//循环找到省的id
		               	    	$.each(data.result,function(index,val){
		               	    		console.log(val.area_id)
		               	    		if(val.area_id==provinceid){
		               	    			//循环得到该省的市
		               	    			$.each(val.child,function(index,val2){
		               	    				str2+="<li data-id='"+val2.area_id+"'><span>"+val2.area_name+"</span><span>&gt;</span></li>"
		               	    			})
		               	    			$("#city").html(str2);
		               	    			$("#sheng").hide();
		               	    			$("#city").show();
		               	    		}
		               	    		
		               	    	})
		               	    })
		               	    //点击省加载该省下的是
		               	    mui("#city").on("tap","li",function(){
		               	    	cityid=$(this).attr("data-id");
		               	    	$("#city-choose").html($(this).find("span:nth-of-type(1)").html())
		               	    	city=$(this).find("span:nth-of-type(1)").html();
		               	    	//循环找到省的id
		               	    	$.each(data.result,function(index,val){
		               	    		if(val.area_id==provinceid){
		               	    			//循环得到该省的市
		               	    			$.each(val.child,function(index,val2){
		               	    				//循环得到该市的id
		               	    				if(val2.area_id==cityid){
		               	    					//循环得到该市的区
		               	    					$.each(val2.three_child,function(index,val3){
				               	    				str3+="<li data-id='"+val3.area_id+"'><span>"+val3.area_name+"</span><span>&gt;</span></li>"
				               	    			})
		               	    					
		               	    				}
		               	    			})
		               	    			$("#town").html(str3);
		               	    			$("#city").hide();
		               	    			$("#town").show();
		               	    		}

		               	    	})
		               	    })
		               	    $("#town").on("tap","li",function(){
		               	    	townid=$(this).attr("data-id");
		               	    	$("#towm-choose").html($(this).find("span:nth-of-type(1)").html());
		               	    	town=$(this).find("span:nth-of-type(1)").html();
		               	    	$("#diqu").val(provice+city+town);
//		               	    	addCookie("cityid",cityid,7)
//		               	    	addCookie("provinceid",provinceid,7)
//		               	    	location.href=document.referrer;
                                $("#quyu").hide();
		               	    })
		               	}
	               }
				   },'json'
				);
		    })
			
		
			
			$(function(){
//				判断有没有登录
				var member_id=getCookie("userid");
				if(member_id==""||member_id==null){
					alert("您还没有登录，请先登录！");
					location.href="../public/login.html";
				}else{
					
					var $phone =/^1[0-9]{10,10}$/;
					var $name=/^[\u4e00-\u9fa5]{2,4}$/;
					if(address_id!=null&&address_id!=""){
						var param={};
						param.member_id=member_id;
						param.address_id=address_id;
						$.post(net+"/public/index.php?s=api/Memberorder/address_edit",param,function(res){
							if(res.code=="200"){
								$("#person").val(res.result.address_realname);
								$("#phone").val(res.result.address_mob_phone);
								$("#diqu").val(res.result.area_name+res.result.city_name+res.result.zone_name)
							    $("#xiangxi").val(res.result.address_detail);
							    provinceid=res.result.area_id;
							    cityid=res.result.city_id;
							    townid=res.result.area_info;
							   
							    if(res.result.address_is_default=="1"){
							    	$(".kaiguan").addClass("mui-active");
							    }else{
							    	$(".kaiguan").removeClass("mui-active");
							    }
							}
						})
					}
					mui(".ding-bar").on("tap",".baocun",function(){
						var param=$(".changep-form").serializeObject();//将表单序列化为JSON对象
						param.area_id=provinceid;
						param.city_id=cityid;
						param.area_info=townid;
						param.is_default=is_default;
						param.member_id= member_id;
						if(param.true_name==null||param.true_name==""){
							alert("请填写联系人")
							return false;
						}else if(!$name.test(param.true_name)){
							alert("请输入真实名称")
							return false;
						}else if(param.mob_phone==""||param.mob_phone==null){
							alert("请填写手机号")
							return false;
						}else if(!$phone.test(param.mob_phone)){
							alert("请填写正确的手机号")
							return false;
						}else if(param.area_id==""||param.city_id==""||param.area_info==""){
							alert("请选择区域")
							return false;
						}else if(param.address==""||param.address==null){
							alert("请填写详细地址")
							return false;
						}
						if(address_id!=null&&address_id!=""){
							param.address_id=address_id;
							$.post(net+"/public/index.php?s=api/Memberorder/address_edit_action",param,function(res){
								if(res.code=="200"){
									alert("修改成功")
									if(pay!=null){
										location.href="pay.html?ye="+ye;
									}else{
										mui.back()
									}
								}
							})
						}else{
							$.post(net+"/public/index.php?s=api/Memberorder/address_add",param,function(res){
								if(res.code=="200"){
									alert("添加成功")
									if(pay!=null){
										location.href="pay.html?ye="+ye;
									}else{
										mui.back();
									}
								}
							})
						}
						
					})
				}
			})
			
			$.fn.serializeObject = function() {
				var o = {};
				var a = this.serializeArray();
				$.each(a, function() {
					if (o[this.name]) {
						if (!o[this.name].push) {
							o[this.name] = [ o[this.name] ];
						}
						o[this.name].push(this.value || '');
					} else {
						o[this.name] = this.value || '';
					}
				});
				return o;
			}

		</script>
	</body>

</html>